import type { PropType } from "vue";
import { defineComponent } from "vue";

export default defineComponent({
    name: "Explain",
    props: {
        // icon类型
        type: {
            type: String as PropType<"question" | "warning" | "danger">,
            default: "question",
        },
        // icon类名
        iconClass: {
            type: String,
            default: "",
        },
    },
    setup(props, { attrs }) {
        const { type, iconClass } = props;

        const getIconType = (): string => {
            const configs = {
                question: "icon-[mynaui--question-square-solid] text-(--el-color-primary)",
                warning: "icon-[mingcute--warning-fill] text-(--el-color-warning)",
                danger: "icon-[iconoir--warning-triangle-solid] text-(--el-color-danger)",
            };
            return configs[type];
        };

        // 统一样式, 需要设置的属性同 el-tooltip
        return () => (
            <el-tooltip {...attrs}>
                <span class={`${iconClass} ${getIconType()} text-base cursor-pointer`} />
            </el-tooltip>
        );
    },
});
